<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication Table</title>
<style>
    body {
        font-family: 'Courier New', Courier, monospace;
        font-size: 30px;
        text-align: center;
        margin-top: 50px;
        
    }
    th,td{
        border: 2px solid blue;
    }
   td {
        
        padding: 5px;
        cursor: pointer;
    }
    .highlight {
        background-color: rgb(128, 194, 235);
        color: #0000ff;
    }
</style>
</head>
<body>
<table border="1">
    <!-- JavaScript will populate this table -->
</table>

<script>
    const table = document.querySelector('table');
    const max = 9;

    for (let i = 1; i <= max; i++) {
        const row = table.insertRow();
        for (let j = 1; j <= i; j++) {
           const cell = row.insertCell();
           const product = i * j;
           cell.textContent = `${i}×${j}=${product}`;
           cell.style.userSelect = "none"; // Prevent text selection
           cell.addEventListener('mouseover', function() {
               cell.classList.add('highlight');
           });
           cell.addEventListener('mouseout', function() {
               cell.classList.remove('highlight');
           });
       }
   }
</script>
</body>
</html>